<!DOCTYPE html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Website for Language institute. Data are presented on webPage through Public API stored in JSON format.">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="Ali Hussain Dhuniya">
 
    <title>Linguistic Center</title>
    <link rel="stylesheet" href="css/minified/style.min.css" />
    <script
      src="https://kit.fontawesome.com/fc31dedf63.js"
      crossorigin="anonymous"
    ></script>

  </head>
  <body>
    <!-- Header -->
    <header class="header">
      <!-- topBar -->
      <div id="hide" class="header__topBar">
        <h4 class="header__h4"></h4>
      </div>
      <!-- End - topBar -->

      <!-- navBar -->
      <nav class="header__nav">
        <!-- leftNav -->
        <div class="header__leftNav">
          <div class="header__logoSection"></div>

          <div>
            <h1 class="header__h1"></h1>
          </div>
          <!-- hambergur menu -->
          <div class="burger">
            <div>
              <i class="fas fa-bars icon"></i>
            </div>
          </div>
          <!-- End-hambergur menu -->
        </div>
        <!-- End- leftNav -->

        <ul class="header__rightNav"></ul>
      </nav>
      <!-- End - navBar -->

    </header>
    <!-- End - Header -->

    <!-- Main -->
    <main id="home" class="main">
      <!-- section-1 -->
      <section id="container">
        <!-- women - image -->
        <div  class="container__womenImage">

        </div>
        <!-- End-women - image -->

        <!-- container-content -->
        <div class="container__contents">
          <h1 class="container__h1"></h1>
          <button class="container__btn"></button>
        </div>
        <!-- End-container-content -->
      </section>
      <!-- End - section - 1 -->

      <!-- section-2 -->
      <section class="section2">
        <!-- Lang container -->
      <div class="container2">
        <div class="container2__langHeading">
          <h3 class="container2__h3"></h3>
        </div>
        <div class="container2__langList">

        </div>
      </div>
      <!-- End lang container -->
    </section>
      <!-- End Section-2 -->

      <!-- about-section-3 -->
      <section id="about" class="section3">
        <!-- container-3 -->
        <div class="container3">
          <!-- left -->
          <div class="container3__left">
            <h1 class="container3__h1"></h1>
            <p class="container3__p0"></p>
            <p class="container3__p1"></p>
            <p class="container3__p2"></p>
            <div class="container3__btn">
              <button class="container3__btnBlock"></button>
            </div>
          </div>
          <!-- End - left -->

          <!-- right -->
          <div class="container3__right">

          </div>
          <!-- End - right -->
        </div>
        <!-- end-container-3 -->
      </section>
      <!-- End about-section-3 -->

      <!-- Tour -->
      <section id="whyUs" class="section4">
        <!-- container - 4 -->
        <div class="container4">
          <!-- back img -->
          <div class="container4__img">

          </div>
          <!-- End-back img -->
          <!-- container4-container -->
          <div id="player" class="container4__container">
            <!-- container-4 - h1 -->
            <h1 class="container4__h1"></h1>
            <h4 class="container4__h4"></h4>
            <div  class="container4__playBtn">

              <div class="container4__icon">
                <i class="fas fa-play fa-4x"></i>
              </div>

            </div>
            <!-- End-container -4 -h1 -->
          </div>
          <!-- End container4-container -->

        </div>
        <!-- End - container -4 -->
      </section>
      <!-- End - Tour -->

      <!-- section -5 -->
      <section class="section5">
        <!-- container -5 -->
        <div class="container5">
          <h1 class="container5__h1"></h1>
          <p class="container5__p0"></p>
          <div class="container5__btn">
            <button class="container5__btnBlock"></button>
          </div>
        </div>
        <!-- End container -5 -->
      </section>
      <!-- End - section -5 -->

      <!-- Section 6 -->
      <section class="section6">
        <!-- container - 6 -->
        <div class="container6">
          <div class="container6__h1"></div>
          <div class="container6__p0"></div>
          <div class="container6__wlcmList">

          </div>
        </div>
        <!-- End - container - 6 -->
      </section>
      <!-- End - section - 6 -->

      <!-- section -7 -->
      <section class="section7">
        <!-- container -7 -->
        <div class="container7">
          <h1 class="container7__h1"></h1>
          <p class="container7__p0"></p>

          <!-- container -7 choose -->
          <div class="container7__choose">

          </div>
          <!-- End container - 7 choose -->
        </div>
        <!-- End -container - 7 -->
      </section>
      <!-- End-section -7 -->

      <!-- Team -->
      <section class="section8">
        <!-- container -8 -->
        <div class="container8">
          <h1 class="container8__h1"></h1>
          <p class="container8__p0"></p>

          <div class="container8__team">

          </div>
        </div>
        <!-- End - container - 8 -->
      </section>

      <!-- End team -->

      <!-- Testimonials -->
      <section class="section9">
        <!-- container - 9 -->
        <div class="container9">
          <h1 class="container9__h1"></h1>
          <p class="container9__p0"></p>

          <div class="container9__testimonials">
            <!-- carausel -->
            <div class="testimonial-carousel">
              <!-- Circled Left 2 icon by Icons8 -->
              <div class="icon-container">
                  <!-- <span class="lnr lnr-arrow-left-circle"></span> -->
                  <i class="fas fa-chevron-circle-left testIcon"></i>
              </div>
              <div class="testimonial-items">
                <div class="testimonial-item first">
                  <blockquote>
                    <i style="color: black;" class="fas fa-quote-left fa-3x">
                      <p class="container9__quote testimonial-quote container9__say"></i></p>
                      <img class="container9__img" src="" />
                      <p class="testimonial-author"><cite class="container9__author container9__p1"></cite></p>
                      <p class="testimonial-status"><cite class="container9__status container9__p2"></cite></p>
                  </blockquote>
              </div>

              <div class="testimonial-item second">
                <blockquote>
                  <i style="color: black;" class="fas fa-quote-left fa-3x"></i>
                    <p class="container9__quote1 testimonial-quote container9__say"></p>
                    <img class="container9__img1" src=""/>
                    <p class="testimonial-author"><cite class="container9__author1 container9__p1"></cite></p>
                    <p class="testimonial-status"><cite class="container9__status1 container9__p2"></cite></p>
                </blockquote>
            </div>

            <div class="testimonial-item third">
              <blockquote>
                <i style="color: black;" class="fas fa-quote-left fa-3x"></i>
                  <p class="container9__quote2 testimonial-quote container9__say"></p>
                  <img class="container9__img2" src=""/>
                  <p class="testimonial-author"><cite class="container9__author2 container9__p1"></cite></p>
                  <p class="testimonial-status"><cite class="container9__status2 container9__p2"></cite></p>
              </blockquote>
          </div>

              </div>
              <div class="icon-container">
                <!-- <span class="lnr lnr-arrow-right-circle"></span> -->
                <i class="fas fa-chevron-circle-right testIcon"></i>
            </div>
        </div>
            <!-- en d- carousel -->
          </div>
        </div>
        <!-- End - container 9 -->
      </section>
      <!-- End - Testimonials -->


      <!-- programs -->
      <section id="programs" class="section10">
        <!-- container - 10 -->
        <div class="container10">
          <h1 class="container10__h1"></h1>
          <p class="container10__p0"></p>

          <div class="container10__programsList">
            <!-- list -->
            <div class="container10__programContents">

            </div>
            <!-- End list  -->
          </div>
        </div>
        <!-- End - container - 10 -->
      </section>
      <!-- End - programs -->

      <!-- professionals -->
      <section class="section11">
       <!-- container - 4 -->
       <div class="container11">
        <!-- back img -->
        <div class="container11__img">

        </div>
        <!-- End-back img -->
        <!-- container4-container -->
        <div  class="container11__container">
          <!-- container-4 - h1 -->
          <h1 class="container11__h1"></h1>
          <h4 class="container11__h4"></h4>
          <div  class="container11__btn">

           <button class="container11__btnBlock"></button>

          </div>
          <!-- End-container -4 -h1 -->
        </div>
        <!-- End container4-container -->

      </div>
      <!-- End - container -4 -->
      <!-- End professionals -->

      <!-- courses -->
      <section id="upcoming" class="courses">
        <!-- container-12 -->
        <div class="container12">
          <h1 class="container12__h1"></h1>
          <p class="container12__p0"></p>
          <div class="container12__coursesSection">

          </div>
        </div>
        <!-- End-container - 12 -->
      </section>
      <!-- End courses -->
    </section>

    <!-- Schedule -->
    <section id="schedule" class="section13">
      <!-- container 13 -->
      <div class="container13">
        <h1 class="container13__h1"></h1>
        <div class="container13__schedule">

        </div>
      </div>
      <!-- End container 13 -->
    </section>
    <!-- End - schedule -->

    <!-- Trust -->
    <section class="section14">
      <!-- container -->
      <div class="container14">
        <h1 class="container14__h1"></h1>

        <div class="container14__companies"></div>

    </div>
      <!-- End container -->

      <!-- App -->
      <section class="section15">
        <!-- container 15 -->
        <div class="container15">
          <h1 class="container15__h1"></h1>
          <p class="container15__p"></p>
          <img src="" class="container15__img">
        </div>
        <!-- End -container 15 -->
      </section>
      <!-- End - App -->
    </section>
    <!-- End - Trust -->

    <!-- Contact -->
    <section id="contact" class="contact">
      <!-- container 16 -->
      <div class="container16">
        <h1 class="container16__h1"></h1>
        <iframe  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3538.446200249756!2d83.45006031501116!3d27.5175935828709!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39969a466ae16f6f%3A0xeba30459ad27f350!2sbhairahawa!5e0!3m2!1sen!2snp!4v1594012979243!5m2!1sen!2snp" width="800" height="600" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
        <img src="" class="container16__img">
        <div class="container16__btn">
          <button class="container16__btnBlock"></button>
        </div>
      </div>
      <!-- End container 16 -->
    </section>
    <!-- End Contact -->
    </main>
    <!-- End - Main -->

    
    <!-- footer -->

   <footer id="footer" class="footer">


    <!-- navBar -->
    <nav class="header__footer-nav">
      <!-- leftNav -->
      <div class="header__footer-leftNav">
        <div class="header__footer-logoSection"></div>

        <div>
          <h1 class="header__footer-h1"></h1>
        </div>
       
      </div>
      <!-- End- leftNav -->

      <ul class="header__footer-rightNav"></ul>
    </nav>
    <!-- End - navBar -->

    <!-- social icons -->
    <div class="footer__icons"></div>
    <!-- End social icons -->

  </footer>
    <!-- End footer -->

    <script type="text/javascript">
      (function() {
          var options = {
              facebook: "108153734298160", // Facebook page ID
              call_to_action: "Message us", // Call to action
              position: "right", // Position may be 'right' or 'left'
          };
          var proto = document.location.protocol,
              host = "whatshelp.io",
              url = proto + "//static." + host;
          var s = document.createElement('script');
          s.type = 'text/javascript';
          s.async = true;
          s.src = url + '/widget-send-button/js/init.js';
          s.onload = function() {
              WhWidgetSendButton.init(host, proto, options);
          };
          var x = document.getElementsByTagName('script')[0];
          x.parentNode.insertBefore(s, x);
      })();
  </script>
<script async type="module" src="js/script.js"></script>
  </body>
</html>
